/* h5的帮助函数
 * H5helper.js
 */
import React, { Component, PropTypes } from 'react';
import { Map,List} from 'immutable';

import LabelComponent from '../containers/myH5/LabelComponent.jsx';
import ImageComponent from '../containers/myH5/ImageComponent.jsx';
import TextComponent from '../containers/myH5/TextComponent.jsx';
import TextareaComponent from '../containers/myH5/TextareaComponent.jsx';
import SelectCompnent from '../containers/myH5/SelectCompnent.jsx';

/**
 *  根据page的数据生成页面组件对象
 **/
export function getPageComponents(pageData,props=null){
 	let components=List();
 	pageData.get('components').forEach(comp=>{
 		if(comp){
 			const idx=comp.get('compNum')-1;
	 		let htmlComp;
	 		if(comp.get('type')==='label'){
	 			htmlComp=(<LabelComponent key={comp.get('id')} {...props} data={comp} />);
			}else if(comp.get('type')==='image'){
				htmlComp=(<ImageComponent key={comp.get('id')} {...props} data={comp} />);
			}else if(comp.get('type')==='input'&&comp.get('attributes').get('type')==='text'){
				htmlComp=(<TextComponent key={comp.get('id')} {...props} data={comp} />);
			}else if(comp.get('type')==='textarea'){
				htmlComp=(<TextareaComponent key={comp.get('id')} {...props} data={comp} />);
			}else if(comp.get('type')==='select'){
				htmlComp=(<SelectCompnent key={comp.get('id')} {...props} data={comp} />);
			}
			components=components.set(idx,htmlComp);
 		}
 		
 	});
	return components;
 }

//获取id
export function getId(type=null){
 	//把时间戳作为id返回
 	const timestamp=new Date().getTime();
 	if(type)
 		return type+'_'+timestamp;
 	return timestamp;
}

//设置图片的真实宽和高
export function getImageWH(imgSrc){
	const maxWidth=300;
	const maxHeight=500;
	let res={};
	//获取图片高度
	let img = new Image();
	img.src = imgSrc;
	if(img.complete){// 判断是否有缓存
		let hRatio,wRatio;
		let ratio = 1;
		let w = img.width,h = img.height;
		wRatio = maxWidth / w;
		hRatio = maxHeight / h;
		if (wRatio<1 || hRatio<1){
			ratio = (wRatio<=hRatio?wRatio:hRatio);
		}
		if (ratio<1){
			w = w * ratio;
			h = h * ratio;
		}
		res.height= parseInt(h);
		res.width= parseInt(w);
	}
	return res;
}

/* 计算拉伸的宽高和x,y的移动
 * 参数moveX,moveY是鼠标的位移
 * pullName 是拉伸的对象
 */
export function computePull(moveX,moveY,pullName){
	//计算宽高变化，就是位移的绝对值
			/*//最大值判断,编辑区域400*650
		if(moveX<0 && Math.abs(moveX)>this.selPull.x){//左边最大值
			moveX=0-this.selPull.x;
		}
		if(moveX>0 && moveX>400-this.selPull.x){//左边最大值
			moveX=400-this.selPull.x;
		}
		if(moveY<0 && Math.abs(moveY)>this.selPull.y){//上边最大值
			moveY=0-this.selPull.y;
		}
		if(moveY>0 && moveY>650-this.selPull.y){//左边最大值
			moveY=650-this.selPull.y;
		}*/
	let widthAdd=Math.abs(moveX);
	let heightAdd=Math.abs(moveY);
	switch (pullName) {//根据不同的点设置不同的拉伸效果
		case 'nw': //左上
			if(moveX<=0&&moveY<=0){//扩大
				widthAdd=widthAdd;
				heightAdd=heightAdd;
			}else if(moveX>=0&&moveY>=0){//缩小
				widthAdd=0-widthAdd;
				heightAdd=0-heightAdd;
			}else{
				widthAdd=0;
				heightAdd=0;
				moveX=0;
				moveY=0;
			}
			break;
		case 'n'://上
		  if(moveY<=0){//扩大
		  	heightAdd=heightAdd;
		  }else if(moveY>=0){//缩小
		  	heightAdd=0-heightAdd;
		  }else{
		  	heightAdd=0;
		  	moveY=0;
		  }
		  moveX=0;widthAdd=0;
		  break;
		case 'ne': //右上
			if(moveX>=0&&moveY<=0){//扩大
				widthAdd=widthAdd;
				heightAdd=heightAdd;
			}else if(moveX<=0&&moveY>=0){//缩小
				widthAdd=0-widthAdd;
				heightAdd=0-heightAdd;
			}else{
				widthAdd=0;
				heightAdd=0;
				moveY=0;
			}
			moveX=0;
			break;
		case 'e':  //右
			moveY=0;heightAdd=0;
			if(moveX>=0){//扩大
				widthAdd=widthAdd;
			}else if(moveX<=0){//缩小
				widthAdd=0-widthAdd;
			}else{
				widthAdd=0;
			}
			moveX=0;
			break;
		case 'se': //右下
			if(moveX>=0&&moveY>=0){//扩大
				widthAdd=widthAdd;
				heightAdd=heightAdd;
			}else if(moveX<=0&&moveY<=0){//缩小
				widthAdd=0-widthAdd;
				heightAdd=0-heightAdd;
			}else{
				widthAdd=0;
				heightAdd=0;
			}
			moveX=0;moveY=0;

			break;
		case 's': //下
			if(moveY>=0){//扩大
				heightAdd=heightAdd;
			}else if(moveY<=0){//缩小
				heightAdd=0-heightAdd;
			}else{
				heightAdd=0;
			}
			moveX=0;moveY=0;widthAdd=0;
			break;
		case 'sw': //左下
			if(moveX<=0&&moveY>=0){//扩大
				widthAdd=widthAdd;
				heightAdd=heightAdd;
			}else if(moveX>=0&&moveY<=0){//缩小
				widthAdd=0-widthAdd;
				heightAdd=0-heightAdd;
			}else{
				widthAdd=0;
				heightAdd=0;
				moveX=0;
			}
			moveY=0;
			break;
		case 'w': //左
			if(moveX<=0){
				widthAdd=widthAdd;
			}else if(moveX>=0){
				widthAdd=0-widthAdd;
			}else{
				widthAdd=0;
				moveX=0;
			}
			moveY=0;heightAdd=0;
			break;
	}
	return {moveX:moveX,moveY:moveY,widthAdd:widthAdd,heightAdd:heightAdd};
}


/**
 * 根据组件类型返回对应的icon
 */

 export function getTypeIcon(type){
 	switch(type){
 		case 'label':
 			return (<i className="font icon"></i>);
 		case 'image':
 			return (<i className="file image outline icon"></i>);
 		case 'input':
 			return (<i className="file icon"></i>);
 		case 'textarea':
 			return (<i className="file icon"></i>);
 		case 'select':
 			return (<i className="file icon"></i>);
 		default:
 			return (<i className="font icon"></i>);
 	}
 }

/**
 * 消息显示
 * msg:消息内容   type：消息类型 info,warn,error,success
 */
export function showMessage(msg,type='info'){
	let color="";
	switch(type){
		case 'success': color="green";break;
		case 'warn': color="yellow";break;
		case 'error': color="red";break;
		default: color="teal";
	}
	$("#errMsg").addClass(color);
	$("#errMsg").find("p").html(msg);
	$("#errMsg").show();
	setTimeout(function(){
		$("#errMsg").fadeOut();
		$("#errMsg").removeClass(color);
	},1500);
}


//创建一个页面
export function createNewPage(pageNum){
	//一个page对象的内容
	const page={
		id: getId('page'),
		pageNum:pageNum,
		attributes: {
			swipeForbidden: false,  //当页是否禁止滑动
			bgName:'',
			background: "",   //背景色
			backgroundOpacity: 1,  //背景透明度
	    }, 
	    components: {},  //组件
	    events: []
	};
	return Immutable.fromJS(page);
}


export function showMessagePopup(msg,callback=null){
	$("#messagePopup").modal({
    		closable  : false,
    		onShow : ()=>{
    			$("#messagePopupContent").html(msg);
    		},
    		onApprove : ()=>{
				if(callback) callback();
				return true;
    		}
		  }).modal('show');
}